<script setup>
import { ref, computed } from "vue";
import { getDofinishregister } from '@/api/step'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()
const newpassword = ref('')
const password = ref('')

function onSubmit() {
    getDofinishregister({
        tel: window.localStorage.getItem('tel'),
        password: newpassword.value
    }).then(res => {
        console.log(res.data);
        if (res.data.code !== '200') {
            return showFailToast('失败文案');
        }
        showSuccessToast('成功文案');
        router.push('../login')
    })
}

// 输入框限制
const btnShow = computed(() => {
    if (password.value !== '' && newpassword.value === password.value) {
        return false
    } else {
        return true
    }
})
</script>

<template>
    <div class="box_big">
        <div class="box_middle">
            <div>
                <h1>输入密码</h1>
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="newpassword" name="输入密码" label="输入密码" placeholder="请输入密码" />
                    </van-cell-group>

                    <van-cell-group inset>
                        <van-field v-model="password" name="请重复输入密码" label="重复输入密码" placeholder="请重复输入密码" />
                    </van-cell-group>
                    <div style="margin: 16px">
                        <van-button round block type="primary" native-type="submit" :disabled="btnShow">
                            注册账号
                        </van-button>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
h1 {
    margin-top: 50px;
    text-align: center;
}

.van-cell-group {
    border: 1px solid rgb(102, 201, 255);
    width: 300px;
    margin: 0 auto;
}

.box_big {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
    position: relative;

    .box_middle {
        height: 400px;
        width: 80%;
        background-color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 10px 10px 20px hotpink;

        .box_small {
            position: absolute;
            top: 50px;

            .submit {
                width: 250px;
                left: 25px;
            }
        }

    }
}</style>